<template>
	<div class="nav-bar">
		
		<div class="left">
			<slot name="left">
				<div class="icon"><i class="iconfont icon-chazhao"></i>&nbsp;&nbsp;</div>
			</slot>
		</div>
		
		
		<div><div class="icon"><i class="iconfont icon-fenxiang"></i>&nbsp;</div></div>
		
		<div class="center">
			<slot>
				
				<!-- <div class="icon"><i class="iconfont icon-fenxiang"></i>&nbsp;</div> -->
			</slot>
		</div>
		
		
		<div class="right"><slot name="right">
			<el-dropdown :hide-on-click="false">
				<span class="el-dropdown-link">
					username
					  <i class="el-icon-arrow-down el-icon--right"></i>
				</span>
				<el-dropdown-menu slot="dropdown">
						<el-dropdown-item></el-dropdown-item>
				</el-dropdown-menu>
		</el-dropdown>
		<!-- <div class="icon"><i class="iconfont icon-xiala">&nbsp;</i></div> -->
		</slot></div>
	</div>
</template>
<script>
	import {useRouter} from 'vue-router';
	export default{
		name:"NavBar",
		
	}
</script>

<style>
	a{text-decoration: none;
	color: gray;}
	.nav-bar{
		display: flex;
		background-color: #FBFBFC;
		width: 56%;
		position: fixed;
		top: 0;
		/* z-index: 9; */
		height: 70px;
		line-height: 70px;
	}
	.left{
		margin-left: 80%;
	}
	
	
	el-dropdown-link {
	  cursor: pointer;
	  color: #409eff;
	}
	.el-icon-arrow-down {
	  font-size: 12px;
	}
	.demonstration {
	  display: block;
	  color: var(--el-text-color-secondary);
	  font-size: 14px;
	  margin-bottom: 20px;
	}
</style>